<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head></h:head>
<body>
	<h:form id="form">
		<p:panel header="Características del Salón">

			<p:dataTable id="tablaCaract" editable="true" style="width:50%">

				<!--  <p:ajax event="rowEdit" listener="#{paisBean.onRowEdit}"
					update=":form:msgs" />
				<p:ajax event="rowEditCancel" listener="#{paisBean.onRowCancel}"
					update=":form:msgs" />
					-->

				<f:facet name="header">
					<p:outputPanel style="text-align:right">
						<h:outputText value="Buscar: " />
						<p:inputText id="globalFilter" onkeyup="" style="width:150px"
							placeholder="Enter keyword" />
					</p:outputPanel>
				</f:facet>

				<p:column selectionMode="single" style="width:2%;text-align:center" />



				<p:column headerText="Característica" style="text-align:left">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="" />
						</f:facet>
						<f:facet name="input">
							<p:inputText id="modelInput" value=""
								style="width:100%" />
						</f:facet>
					</p:cellEditor>
				</p:column>
				<p:column headerText="Desacripción" style="text-align:left">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="" />
						</f:facet>
						<f:facet name="input">
							<p:inputText id="model" value=""
								style="width:100%" />
						</f:facet>
					</p:cellEditor>
				</p:column>
				<p:column headerText="Modificar"
					style="width:70px;text-align: center">
					<p:rowEditor />
				</p:column>
				

				<f:facet name="footer">
					<p:outputPanel style="text-align:left">

						<p:commandButton process="tablaCaract" update=":form:tablaCaract"
							value="Borrar">
							<p:confirm header="Confirmation" message="Are you sure?"
								icon="ui-icon-alert" />
						</p:commandButton>
					</p:outputPanel>
				</f:facet>


			</p:dataTable>
			<p:confirmDialog global="true" showEffect="fade" hideEffect="explode">
				<p:commandButton value="Yes" type="button"
					styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
				<p:commandButton value="No" type="button"
					styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
			</p:confirmDialog>

			<br />

			<p:fieldset id="panelNuevaCaract" legend="Nuevo" toggleable="true"
				toggleSpeed="500" collapsed="true" style="width:46%">
				<p:messages id="messages" autoUpdate="false" />
				<h:panelGrid columns="3" cellpadding="5">
					<h:outputLabel id="nomCaract" value="Nombre Característica:" />
					<p:inputText required="true" label="Nombre característica"
						value="" />
					<p:message for="nomCaract" display="icon" />

					<h:outputLabel id="descripcionCaract" value="Descripción:" />
					<p:inputText required="true" label="Descripción"
						value="" />
					<p:message for="descripcionCaract" display="icon" />
				</h:panelGrid>
				<p:separator id="separator" />
				<p:commandButton value="Guardar" id="ajax" update="form"
					icon="ui-icon-disk" />
			</p:fieldset>
		</p:panel>

	</h:form>

</body>
</html>
